<template>
    <!--最常规的实体按钮-->
    <div class="but-o">
        <div class="but-n" :style="mainStyle">
            <p :style="pStyle" v-text="textBtn"></p>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'buttonNormalHollow',
        // 最常规的实体按钮
        data() {
            return {
                mainStyle: {
                    width: this.widthPro / 3.75 + 'vw',
                    height: this.heightPro / 3.75 + 'vw',
                    borderRadius: 100 / 3.75 + 'vw',
                },
                pStyle: {
                    fontSize: (this.size / 3.75) + 'vw',
                    lineHeight: (this.heightPro) / 3.75 + 'vw'
                }
            };
        },
        props: {
            widthPro: {
                type: String
            },
            heightPro: {
                type: String
            },
            textBtn: {
                type: String
            },
            color: {
                type: String
            },
            size: {
                type: String
            },
            funText: {
                type: String
            }
        },
        methods: {},
        watch: {}
    };
</script>

<style lang="stylus" scoped>
    @import '~assets/main.styl'
    .but-o {
        flex-x(center)
        height vw(55)
        .but-n {
            flex-x(center)
            border 1px solid main-color
            p {
                color main-color
            }
        }
    }
</style>
